<template>
  <div class="info-container">
      <!-- 导航栏 -->
    <van-nav-bar
    title="编辑资料"
    left-text="返回"
    left-arrow
    @click-left='clickback'
    />
    <!-- 头像 -->
    <div class="avatar_info" >
        <!-- <van-image
        class="avatar"
        v-imagerror="defaultImg"
        :src="DetailInfo.avarta"
        round
        @click="avatarFn"
        /> -->
        <img
        @click="avatarFn"
        class="avatar"
        v-imagerror="defaultImg"
        :src="DetailInfo.avarta"
         alt="">
        <!-- 修改头像弹层   start-->
      <van-popover
        v-model="showPopover"
        theme="dark"
        trigger="click"
        :actions="actions"
        placement="top-start"
        @select='select'
    />
     <!-- 修改头像弹层   end-->
     <input type="file" hidden name="uoloadAvatar" ref="uoloadAvatar" @change="inputChange">

    </div>

     <!-- 信息模块 -->
    <div class="info_cell">
        <van-cell-group title="基本信息">
          <van-cell title="昵称" :value="DetailInfo.nichen" size="large" is-link @click="editName"/>
          <van-cell title="性别" :value="DetailInfo.sex" size="large" is-link @click="editSex"/>
          <van-cell title="生日" :value="DetailInfo.birthDay" size="large" is-link @click="editBirth"/>
          <van-cell title="地区" :value='DetailInfo.address' size="large" is-link @click="editAddr"/>
          <van-cell title="个人简介" :value="DetailInfo.introduce" size="large" is-link @click="editIntro"/>
        </van-cell-group>
        <van-cell-group title="更多">
          <van-cell title="密码修改" value="修改密码" size="large" is-link @click="editPasswd"/>
          <van-cell title="账号注销" value="注销账号" size="large" is-link @click="cancelUser"/>
        <div class="footer">
          <van-button type="default" @click="logout">退出登录</van-button>
        </div>
        </van-cell-group>
    </div>

<!-- 修改头像弹层 -->
    <!-- 编辑昵称弹层    start-->
    <van-dialog v-model="showNameDialog" title="修改" >
      <van-field
        v-model="DetailInfo.nichen"
        rows="1"
        autosize
        type="textarea"
        maxlength="7"
        placeholder="请输入昵称"
        show-word-limit
      />
   </van-dialog>
    <!-- 编辑昵称弹层    end-->
    <!-- 编辑性别弹层   start -->
   <van-dialog v-model="showSexDialog" title="昵称" >
    <van-radio-group v-model="DetailInfo.sex" direction="horizontal">
      <van-radio name="男" >男</van-radio>
      <van-radio name="女" >女</van-radio>
    </van-radio-group>
   </van-dialog>
    <!-- 编辑性别弹层   end-->
    <!-- 编辑生日弹层    start-->
  <van-dialog v-model="showBirthDialog" title="选择生日" :showConfirmButton='false'>
    <van-datetime-picker
      v-model="currentDate"
      type="date"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="onBirthConfirm"
      @cancel="showBirthDialog = false"
    />
  </van-dialog>
    <!-- 编辑生日弹层    end-->
    <!-- 编辑地区弹层    start-->
  <van-dialog v-model="showAddrDialog" title="选择地区" :showConfirmButton='false'>
    <van-area
    :area-list="areaList"
    @confirm="onConfirm"
    @cancel="showAddrDialog = false"
  />
  </van-dialog>
    <!-- 编辑地区弹层    end-->
    <!-- 编辑个人简介   start -->
    <van-dialog v-model="showIntroDialog" title="个性签名" >
      <van-field
        v-model="DetailInfo.introduce"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="介绍一下自己吧"
        show-word-limit
       />
    </van-dialog>
  <!-- 编辑个人简介   end -->
  <!-- 修改密码弹层   start -->
  <van-dialog v-model="showPasswdDialog" title="修改密码" :showConfirmButton='false' >
    <van-form  ref="passVlidate" validate-trigger="onSubmit">
      <van-field
      v-model="pw.oldpassword"
      type="password"
      name="原密码"
      label="原密码"
      :rules="[{ required: true, message: '密码不能为空' }]"
    />
    <van-field
    v-model="pw.password"
    type="password"
    name="新密码"
    label="修改密码"
    :rules="[{ required: true, message: '密码不能为空' }]"
  />
  <van-field
    v-model="pw.repassword"
    type="password"
    name="密码"
    label="确认密码"
    :rules="[{ required: true, message: '密码不能为空' }]"
  />
   <div class="formBtn">
    <van-button type="info" native-type="submit" block round @click="setPwd">提交</van-button>
    <van-button plain type="info" block round @click="PWDcancel">取消</van-button>
  </div>
</van-form>
  </van-dialog>
    <!-- 修改密码弹层   end -->
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'
import { Dialog, ImagePreview, Toast } from 'vant'
import { delUser } from '@/api/user'

export default {
  name: 'info',
  computed: {
    userDetailInfo () {
      return this.$store.state.user.userDetailInfo
    },
    DetailInfo () {
      return this.userDetailInfo
    }
  },
  data () {
    return {
      defaultImg: 'https://img01.yzcdn.cn/vant/cat.jpeg',
      pw: {
        oldpassword: null,
        password: null,
        repassword: null
      },
      showPopover: false,
      showNameDialog: false,
      showSexDialog: false,
      showBirthDialog: false,
      showAddrDialog: false,
      showIntroDialog: false,
      showPasswdDialog: false,
      // username: null,
      // sex: '男',
      // birth: this.formatDate(new Date()),
      minDate: new Date(1770, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      areaList,
      // address: '河北省/石家庄/长安区',
      intro: '介绍一下自己吧',
      actions: [{ text: '查看头像' }, { text: '上传头像' }]

    }
  },
  methods: {
    async clickback () {
      this.$store.commit('user/setuserDetailInfo', this.userDetailInfo)
      try {
        if (this.DetailInfo.oldpassword) {
          this.DetailInfo.oldpassword = this.pw.oldpassword
          this.DetailInfo.password = this.pw.password
          this.DetailInfo.repassword = this.pw.repassword
          await this.$store.dispatch('user/updateUserInfo', this.DetailInfo)
        } else {
          const { password, ...aa } = this.DetailInfo
          await this.$store.dispatch('user/updateUserInfo', aa)
        }
        this.$router.back()
      } catch (err) {
        if (err.status === 400) { this.$toast.fail(err.message) }
      }
    },
    avatarFn () {
      this.showPopover = true
    },
    select (action, index) {
      if (index === 0) {
        ImagePreview({
          images: [
            this.$store.state.user.userDetailInfo.avarta || this.defaultImg
          ],
          closeable: true
        })
      } else {
        this.$refs.uoloadAvatar.click()
      }
    },
    async inputChange () {
      // 获取文件对象
      const file = this.$refs.uoloadAvatar.files[0]
      // 获取blob数据
      this.DetailInfo.avarta = window.URL.createObjectURL(file)
      try {
        await this.$store.dispatch('user/updateUserInfo', this.DetailInfo)
        this.$refs.uoloadAvatar.value = ''
      } catch (err) {
        if (err.status === 400) { this.$toast.fail(err.message) }
      }
    },
    editName () {
      this.showNameDialog = true
    },
    editSex () {
      this.showSexDialog = true
    },
    editBirth () {
      this.showBirthDialog = true
    },
    editAddr () {
      this.showAddrDialog = true
    },
    editIntro () {
      this.showIntroDialog = true
    },
    editPasswd () {
      this.showPasswdDialog = true
    },
    formatDate (date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    },
    onBirthConfirm (values) {
      this.DetailInfo.birthDay = this.formatDate(values)
      this.showBirthDialog = false
    },
    onConfirm (values) {
      this.DetailInfo.address = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/')
      this.showAddrDialog = false
    },
    PWDcancel () {
      console.log(111)
      this.pw.oldpassword = ''
      this.pw.password = ''
      this.pw.repassword = ''
      this.$refs.passVlidate.resetValidation()
      this.showPasswdDialog = false
    },
    cancelUser () {
      // 注销账号
      Dialog.confirm({
        title: '账号注销',
        message: '确定注销该账号吗？'
      })
        .then(async () => {
          await delUser()
          this.$store.commit('user/logout')
          this.$router.push('/login')
        })
        .catch(() => {
          console.log('取消注销该账号')
        })
    },
    logout () {
      // 退出账号
      Dialog.confirm({
        title: '退出账号',
        message: '确定退出账号该账号吗？'
      })
        .then(() => {
          this.$store.commit('user/logout')
          this.$router.push('/login')
        })
        .catch(() => {
          console.log('取消退出账号')
        })
    },
    async setPwd () {
      this.showPasswdDialog = false
      this.$router.back()
    },

    // 返回布尔值
    beforeRead (file) {
      if (file.type !== 'image/jpeg') {
        Toast('请上传 jpg 格式图片')
        return false
      }
      return true
    }

  }
}
</script>

<style scoped lang="less">
.info-container{
  /deep/.van-popup {
   background: #f5f7f9;
}
   /deep/.pt10 {
  padding: 10px;
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
  /deep/.van-dialog__content .van-radio--horizontal{
    padding: 20px 100px 50px;
}
.formBtn{
  display: flex;
  justify-content:space-around;
  margin: 35px;
  button{
    width: 40%;
  }
}
.footer{
  text-align: center;
  button{
    // border: none;
    width: 70%;
  }
}

}
</style>
